<template>
	<view>
		<uni-nav-bar dark background-color="#2477f4" title="经营统计" left-icon="left" @clickLeft="back"
			:border="false"></uni-nav-bar>
		<view class="bc"></view>
		<!-- 开头部分 -->
		<view class="orderInfo">
			<view class="title">
				<view class="button">
					<view @click="changeService('0')" :class="status == 0?'checked1':'btn1'">今日</view>
					<view @click="changeService('1')" :class="status == 1?'checked2':'btn2'">昨日</view>
				</view>
				<view class="date" @click="isOpen = !isOpen">
					<image src="/static/calander.png" mode="" class="date-img"></image>
					自定义
				</view>
				<!-- 下拉列表 -->
				<view v-if="isOpen" class="dropdown-list">
					<view v-for="(option, index) in options" :key="index" @click="selectOption(index)">{{ option }}
					</view>
				</view>
			</view>
			<view class="infoItem">
				<view>
					<view class="infoItem-bc1">
						<image src="/static/收入@2x.png" mode=""></image>
					</view>
					<view class="white"></view>
					<text>￥</text>
					<text>2066.5</text>
					<view class="info1">收入</view>
				</view>
				<view>
					<view class="infoItem-bc2">
						<image src="/static/订单-全部订单@2x.png" mode=""></image>
					</view>
					<view class="white"></view>
					<text>￥</text>
					<text>2066.5</text>
					<view class="info1">收入</view>
				</view>
			</view>
		</view>
		<!-- 收入分布部分 -->
		<view class="Income">
			<view class="title">收入分布</view>
			<view class="content">
				<qiun-data-charts type="ring" :opts="opts" :chartData="chartDataIncome" />
			</view>
		</view>
		<!-- 收入分布部分 -->
		<view class="order">
			<view class="title">订单分布</view>
			<view class="content">
				<qiun-data-charts type="column" :chartData="chartDataOrder" />
			</view>
		</view>
		<view class="white2">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: '0',
				// 下拉框的选项数组
				options: ['一周内', '一个月内', '三个月内', '半年内', '一年内'],
				// 当前选中的选项索引
				selectedIndex: 0,
				// 下拉列表是否展开
				isOpen: false,
				//条形图数据
				chartDataOrder: {},
				// //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				//       opts: {
				//         color: ["#7caefe","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				//         padding: [15,15,0,5],
				//         enableScroll: false,
				//         legend: {},
				//         xAxis: {
				//           disableGrid: true
				//         },
				//         yAxis: {
				//           data: [
				//             {
				//               min: 0
				//             }
				//           ]
				//         },
				//         extra: {
				//           column: {
				//             type: "group",
				//             width: 30,
				//             activeBgColor: "#000000",
				//             activeBgOpacity: 0.08
				//           }
				//         }
				//       }
				//环状图数据
				chartDataIncome: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#947fff", "#fd7aa4", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					// title: {
					// 	name: "收益率",
					// 	fontSize: 15,
					// 	color: "#666666"
					// },
					// subtitle: {
					// 	name: "70%",
					// 	fontSize: 25,
					// 	color: "#7cb5ec"
					// },
					extra: {
						ring: {
							ringWidth: 20,
							activeOpacity: 1,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			}
		},
		onReady() {
			this.getServerDataOrder();
			this.getServerDataIncome();
		},
		computed: {
			// 计算当前选中的值
			selectedValue() {
				return this.options[this.selectedIndex];
			}
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			//切换“今日”“明日”的事件
			changeService(val) {
				this.status = val;
				console.log("当前服务事件为：" + val) // 这里可以根据不同的serviceType进行后续操作，比如显示对应表单等
			},
			// 选择选项的方法
			selectOption(index) {
				this.selectedIndex = index;
				this.isOpen = false;
			},
			//获取订单分布图形化的数据
			getServerDataOrder() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						categories: ["维修", "保养","洗车"],
						series: [{
								name: "订单量",
								data: [300, 170, 346]
							}
						]
					};
					this.chartDataOrder = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			//环状图数据
			getServerDataIncome() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "洗车",
								"value": 500
							}, {
								"name": "保养",
								"value": 1566.56
							}]
						}]
					};
					this.chartDataIncome = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style>
	.bc {
		width: 750rpx;
		height: 300rpx;
		position: relative;
		border-top: 2rpx solid #2477f4;
		background-color: #2477f4;
	}

	/* 开头部分开始 */

	.orderInfo {
		transform: translate(0rpx, -280rpx);
		top: 1020rpx;
		margin: 0 20rpx;
		padding: 20rpx;
		width: 670rpx;
		border-radius: 20rpx;
		background-color: white;
	}

	.orderInfo .title {
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 4px solid #f2f2f2;
		position: relative;
	}

	.button {
		width: 250rpx;
		height: 70rpx;
		left: 220rpx;
		top: 10rpx;
		display: flex;
		position: absolute;


		line-height: 70rpx;
		text-align: center;
	}

	.btn1 {
		width: 125rpx;
		height: 70rpx;
		color: #2477f4;
		border-radius: 35rpx 0 0 35rpx;
		background-color: #f2f2f2;
	}

	.checked1 {
		width: 125rpx;
		height: 70rpx;
		color: white;
		background-color: #2477f4;
		border-radius: 35rpx 0 0 35rpx;
	}

	.btn2 {
		width: 125rpx;
		height: 70rpx;
		color: #2477f4;
		border-radius: 0rpx 35rpx 35rpx 0;
		background-color: #f2f2f2;
	}

	.checked2 {
		width: 125rpx;
		height: 70rpx;
		color: white;
		border-radius: 0rpx 35rpx 35rpx 0;
		background-color: #2477f4;
	}

	.date {
		right: 0;
		position: absolute;
		font-size: 30rpx;
	}

	.dropdown-list {
		z-index: 100;
		border: 2rpx solid #f8f8f8;
		box-shadow:0 0 0 4rpx #f8f8f8;
		padding: 5px;
		position: absolute;
		right: 0;
		top: 88rpx;
		width: 200rpx;
		background-color: white;
		border-radius: 20rpx;

	}

	.dropdown-list view {
		height: 50rpx;
		cursor: pointer;
		text-align: center;
		padding: 10rpx;
		line-height: 50rpx;

	}

	.dropdown-list view:hover {
		background-color: #f0f0f0;
	}

	.date .date-img {
		width: 30rpx;
		height: 30rpx;
		padding-right: 10rpx;
	}


	.infoItem {
		width: 670rpx;
		display: flex;
		padding: 40rpx 0;
		text-align: center;
		justify-content: space-around;
	}

	.infoItem>view {
		width: 200rpx;
		height: 250rpx;
		position: relative;
		border-radius: 20rpx;
		border: 2rpx solid #f0f0f0;
	}

	.infoItem image {
		width: 40rpx;
		height: 40rpx;
		margin-top: 15rpx;
	}

	.infoItem-bc1 {
		top: 40rpx;
		left: 65rpx;
		width: 70rpx;
		height: 70rpx;
		position: absolute;
		border-radius: 20rpx;
		background-color: #ff642d;
		text-align: center;
	}

	.infoItem-bc2 {
		top: 40rpx;
		left: 65rpx;
		width: 70rpx;
		height: 70rpx;
		position: absolute;
		border-radius: 20rpx;
		background-color: #287df7;
		text-align: center;
	}

	.white {
		height: 130rpx;
	}

	.infoItem>view>text:nth-child(4) {
		font-size: 34rpx;
		font-weight: bold;
	}

	/* 开头部分结束 */

	/* 收入分布 */
	.Income {
		width: 650rpx;
		margin: 20rpx;
		top: 620rpx;
		position: absolute;
		padding: 40rpx 30rpx;
		border-radius: 20rpx;
		background-color: white;
	}

	.order {
		width: 650rpx;
		margin: 20rpx;
		top: 1290rpx;
		position: absolute;
		padding: 40rpx 30rpx;
		border-radius: 20rpx;
		background-color: white;
	}


	.Income .title {
		font-size: 36rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
		border-bottom: 4px solid #f2f2f2;
	}
	
	.order .title {
		font-size: 36rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
		border-bottom: 4px solid #f2f2f2;
	}


	/* 收入分布 */
	.white2{
		width: 200rpx;
		height: 1200rpx;
	}
</style>